<div class="flex justify-between">
  <div class="flex-1 pr-5">
    <div class="flex justify-between">
      <a-card class="flex-1 mr-5">
        <div>电视剧</div>
        <div id="tv_count" style="font-size: 24px;"></div>
        <div>今日新增1部</div>
      </a-card>
      <a-card class="flex-1 mr-5">
        <div>电影</div>
        <div id="movie_count" style="font-size: 24px;"></div>
        <div>今日新增1部</div>
      </a-card>
      <a-card class="flex-1 mr-5">
        <div>电视剧</div>
        <a-statistic :value="112893"></a-statistic>
        <div>今日新增1部</div>
      </a-card>
      <a-card class="flex-1">
        <div>电视剧</div>
        <a-statistic :value="112893"></a-statistic>
        <div>今日新增1部</div>
      </a-card>
    </div>
    <div class=" mt-5">
      <div id="line_chart" class="rounded-lg bg-white" style="height: 350px;"></div>
    </div>
    <div class="mt-5 flex justify-between">
      <div id="pillar_chart" class="flex-1 mr-5 bg-white rounded-lg" style="height: 300px;"></div>
      <div id="cake_chart" class="flex-1 bg-white rounded-lg" style="height: 300px;"></div>
    </div>
  </div>
  <div style="width: 300px;">

    <!-- <div id="radar_chart" class="bg-white mt-5 rounded-lg" style="height: 300px;"></div> -->
    <div>
      <a-card>
        <a-typography-title :level="5">电视剧分类展示</a-typography-title>
        <div class="flex" v-for="(item, idx) in classProgress" :key="idx">
          <div class="mr-2">{{item.classify}}</div>
          <div class="mr-2">{{item.count}}</div>
          <div class="flex-1"> <a-progress :percent="item.count" size="small" :show-info="false" steps=""></a-progress>
          </div>
        </div>
      </a-card>
    </div>

    <a-card class="mt-5">
      <a-typography-title :level="5">快捷导航</a-typography-title>
      <div class="grid grid-cols-3 gap-4">
        <div class=" flex justify-center items-center flex-col cursor-pointer mt-1" v-for="(item,idx) in quickNavList"
          :key="idx" @click="goto(item.path)">
          <div>
            <svg class="icon" aria-hidden="true" style="width: 48px;height: 48px;">
              <use :xlink:href="item.icon"></use>
            </svg>
          </div>
          <div class="text-xs mt-1 ">{{item.name}}</div>
        </div>
      </div>
    </a-card>
  </div>

</div>
<script>
  function disposeList(list, list_count) {
    let dat = list.sort((a, b) => b.count - a.count);
    let other = { classify: "other", count: 0 };
    for (let i = list_count; i < dat.length; i++) {
      other.count += dat[i].count;
    }
    dat.length = list_count;
    dat.push(other);
    let all = dat.reduce((prev, next) => prev + next.count, 0);
    dat = dat.map(a => ({ ...a, percent: Number((a.count / all).toFixed(2)) }));
    return dat
  }
  function useLineChart(data) {

    let chart = new G2.Chart({
      container: 'line_chart',
      autoFit: true,
    });
    chart
      .data(data.value.tv_list)
      .title('电视剧数据展示')
      .encode('x', 'classify')
      .encode('y', 'count')
      .scale('x', {
        range: [0, 1],
      })
      .scale('y', {
        nice: true,
      })
      .axis('y', { title: "电视剧数量" })
      .axis('x', { title: "电视剧分类" });

    chart.line()
      .encode('shape', 'smooth');

    chart.point()
      .encode('shape', 'point')
      .tooltip((itm) => ({
        name: itm.classify,
        value: itm.count + '部',
      }));
    chart.render();
  }
  function usePillarChart(data) {

    let chart = new G2.Chart({
      container: 'pillar_chart',
      autoFit: true,
    });
    chart.interval()
      .data(data.value.movie_list)
      .title('电影数据展示')
      .encode('x', 'classify')
      .encode('y', 'count')
      .axis('y', { title: "电影数量" })
      .axis('x', { title: "电影分类" })
      .tooltip((itm) => ({
        name: itm.classify,
        value: itm.count + '部',
      }));

    chart.render();
  }

  function useCakeChart(data) {
    let dat = disposeList(data.value.movie_list, 6)
    let chart = new G2.Chart({
      container: 'cake_chart',
      autoFit: true,
    });

    chart.coordinate({ type: 'theta', outerRadius: 0.8 });
    chart.title('电影分类展示');
    chart
      .interval()
      .data(dat)
      .transform({ type: 'stackY' })
      .encode('y', 'percent')
      .encode('color', 'classify')
      .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
      .label({
        position: 'outside',
        text: (itm) => `${itm.classify}: ${itm.percent * 100}%`,
      })
      .tooltip((itm) => ({
        name: itm.classify,
        value: itm.count + '部',
      }));

    chart.render();
  }
  function useRadarChart() {
    let data = [
      { item: 'Design', type: 'a', score: 70 },
      { item: 'Design', type: 'b', score: 30 },
      { item: 'Development', type: 'a', score: 60 },
      { item: 'Development', type: 'b', score: 70 },
      { item: 'Marketing', type: 'a', score: 50 },
      { item: 'Marketing', type: 'b', score: 60 },
      { item: 'Users', type: 'a', score: 40 },
      { item: 'Users', type: 'b', score: 50 },
      { item: 'Test', type: 'a', score: 60 },
      { item: 'Test', type: 'b', score: 70 },
      { item: 'Language', type: 'a', score: 70 },
      { item: 'Language', type: 'b', score: 50 },
      { item: 'Technology', type: 'a', score: 50 },
      { item: 'Technology', type: 'b', score: 40 },
      { item: 'Support', type: 'a', score: 30 },
      { item: 'Support', type: 'b', score: 40 },
      { item: 'Sales', type: 'a', score: 60 },
      { item: 'Sales', type: 'b', score: 40 },
      { item: 'UX', type: 'a', score: 50 },
      { item: 'UX', type: 'b', score: 60 },
    ];

    let chart = new G2.Chart({
      container: 'radar_chart',
      autoFit: true,
    });
    chart.title('分类数据展示');
    chart.coordinate({ type: 'polar' });

    chart
      .data(data)
      .scale('x', { padding: 0.5, align: 0 })
      .scale('y', { tickCount: 5 })
      .axis('x', { grid: true })
      .axis('y', { zIndex: 1, title: false });

    chart
      .area()
      .encode('x', 'item')
      .encode('y', 'score')
      .encode('color', 'type')
      .encode('shape', 'smooth')
      .style('fillOpacity', 0.5)
      .scale('y', { domainMax: 80 });

    chart
      .line()
      .encode('x', 'item')
      .encode('y', 'score')
      .encode('color', 'type')
      .encode('shape', 'smooth')
      .style('lineWidth', 2);

    chart.interaction('tooltip', { crosshairsLineDash: [4, 4] });

    chart.render();
  }
  function useQuickNav() {
    const quickNavList = ref([
      {
        name: '添加电视剧',
        path: "/admin/tv/add?menu_open=tv",
        icon: "#icon-yewuxietong"
      },
      {
        name: '添加电影',
        path: "/admin/movie/add?menu_open=movie",
        icon: "#icon-tushuzhishiku"
      },
      {
        name: '电视剧列表',
        path: "/admin/tv/list?menu_open=tv",
        icon: "#icon-xiangmu"
      },
      {
        name: '电影列表',
        path: "/admin/movie/list?menu_open=movie",
        icon: "#icon-yundongbisai"
      },
      {
        name: '赞助',
        path: "/admin/tv/add?menu_open=tv",
        icon: "#icon-shourushoukuan"
      },
    ])
    return {
      quickNavList
    }
  }
  function useCountUp(indexData) {
    let tvCountNum = new countUp.CountUp('tv_count', indexData.value.tv_count);
    tvCountNum.start();
    let movieCountNum = new countUp.CountUp('movie_count', indexData.value.movie_count);
    movieCountNum.start()
  }
  function useMain() {
    const indexData = ref({
      tv_count: 0,
      movie_count: 0,
      tv_list: [],
      movie_list: []
    })
    const classProgress = ref([]);
    const getData = async () => {
      try {
        let ret = await axios.post("/v1/web/index/data");
        indexData.value = ret.data.data;
        console.log(ret)
      } catch (e) {
        let msg = '获取数据失败';
        console.log(e, msg);
        Hint.error(msg);
      }
    }
    onMounted(async () => {
      await getData();
      useCountUp(indexData);
      isIndex.value = true;
      nextTick(() => {
        usePillarChart(indexData);
        useLineChart(indexData);
        useCakeChart(indexData);
        // useRadarChart(indexData);
        classProgress.value = disposeList(indexData.value.tv_list, 5)
      })

    })
    return {
      indexData,
      classProgress,
      timeFix: timeFix(),
      ...useQuickNav(),
    }
  }
</script>